<template>
	<view class="content">
		<hs-status-bar></hs-status-bar>
		<top-bar :title="'DIY定制'" :haveBack="false" @dbClick="dbClick"></top-bar>
		<view class="list">
			<view class="material-content">
				<view class="phone-model">
					<text class="title">机型：</text>
					<view class="phone-select">
						<hs-selectPhoneModel style="display: inline-block;position:relative;"
							@selectModel="selectModel"><text class="text1">▼</text></hs-selectPhoneModel>

					</view>
				</view>
				<view class="material-name" @click="materialListShow = !materialListShow">
					<image :src="materialList[activeMaterialIndex].baseImageUrl" mode="aspectFit"></image>
					<image :src="materialList[activeMaterialIndex].frameImageUrl" mode="aspectFit"></image>
					<text>{{materialList[activeMaterialIndex].name}}</text>
					<text class="text1">▼</text>
				</view>
				<view class="material-list" v-if="materialListShow == true">
					<view class="" @click="materialListShow = false"
						style="height: 100vh;width: 100vw;position: absolute;top: 0;left: 0;">

					</view>
					<scroll-view scroll-x="true" class="material-scroll" enable-flex>
						<view class="material-item" v-for="(item,index) of materialList" :key="item.id"
							:class="{active:activeMaterialIndex==index}">
							<radio checked class="radio" v-if="activeMaterialIndex==index" />
							<view class="image" @click="selectMaterial(item,index)">
								<image :src="item.baseImageUrl" mode="aspectFit"></image>
								<image :src="item.frameImageUrl" mode="aspectFit">
							</view>

							</image>
							<view class="title">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<scroll-view scroll-anchoring refresher-default-style="black" refresher-background="#F6F6F6"
				:refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" refresher-enabled scroll-y scroll-with-animation
				@scrolltolower="scrolltolower" class="scroll" :scroll-top="scrollTop">
				<!-- <view class="select">
					<input type="text" />
					<view class="btn-edit">
						<navigator url="/pages/diy/diyPhoneCase">
							图案
							<br />
							定制
						</navigator>

					</view>
				</view> -->
				<view class="list-box">

					<view class="product-item" v-for="item of templateList" :key="item.id">
						<navigator :url="`/pages/product/productDetail?id=${item.id}`">
							<view class="item">
								<image :src="item.imageUrl" lazy-load mode="aspectFit" style="background-color: #eee;"
									class="picture"></image>
								<!-- <view class="title">
									{{item.name}}
								</view> -->
								<!-- <view class="price">
									￥{{item.price}}
								</view> -->
							</view>
						</navigator>
					</view>
				</view>
				<view class="hs-p-b-20" v-if="!isEmpty">
					<u-loadmore :status="status" />
				</view>
				<u-empty v-if="isEmpty" mode="car" text="暂无数据" icon="/static/images/icon/product.jpg">
					<view style="margin-top: 40rpx;text-decoration-line: underline;" @click="toEdit">
						没有满意的？试试自己定制
					</view>
				</u-empty>
			</scroll-view>
			<!-- <trolley ref="trolley" @tolleyHide="tolleyHide" :scollUnder="93"></trolley>
			<view class="shopping-trolley" :class="{tShow,hide:trolleySum.allCount == 0&&!tShow}">
				<view>
					<hs-badge :count="trolleySum.allCount" v-show="trolleySum.allCount"></hs-badge>
					<image src="@/static/images/icon/trolley.png" mode="" @click="showTrolley" class="car"></image>
				</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="get-phone"
					v-if="!phoneNumber">授权并获取手机号</button>
				<text class="price">￥{{trolleySum.productAmount}}</text>
				<view class="to-order" @click="$u.debounce(toOrder)"
					:style="{color:trolleySum.productCount?'#3D3D3D':'#999'}">
					{{trolleySum.productCount == 0 ?'不可结算':'去结算'}}

				</view>

			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getTemplateList
	} from '@/api/product.js';
	import {
		getStyleList,
		getMaterialList,
		getSkuList
	} from '@/api/custom.js';
	import {
		decryptPhoneNumber
	} from '@/api/user.js';
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				scrollTop: 0,
				triggered: false,
				templateList: [],
				styleList: [],
				materialList: [],
				activeStyleList: [],
				activeMaterial: '',
				activeMaterialIndex: 0,
				activeMaterialName: '材质',
				pageSize: 10,
				isEmpty: false,
				tShow: false,
				status: "loading",
				materialListShow: false,
				_phoneModelId: '',
			}
		},
		computed: {
			...mapGetters(['phoneNumber', 'phoneModelId'])
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				if (this.triggered) return
				this.triggered = true;
				setTimeout(() => {
					this.getTemplateList();
				}, 500)
			},
			// 复位
			onRestore() {
				this.triggered = false;
			},
			// 滑动到底部
			scrolltolower() {
				if (this.templateList.length < this.pageSize) return
				this.getTemplateList(this.templateList[this.templateList.length - 1].id)
			},
			// 选择手机型号
			selectModel(data) {
				this._phoneModelId = data
				this.getMaterialList(data)
				uni.$u.debounce(() => {
					this.onRefresh()
				})
			},
			// 获取机壳列表
			async getMaterialList(phoneModelId) {
				const data = await getSkuList({
					materialMap: {
						11: phoneModelId || this.phoneModelId
					},
					pageSize: 50
				})
				this.$nextTick(() => {
					this.materialList = data.data
					let idx = this.materialList.findIndex(item => {
						return this.activeMaterial == item.materialMap[10]
					})
					idx = idx == -1 ? 0 : idx
					this.selectMaterial(this.materialList[idx], idx)
				})



			},
			// 选择材质
			selectMaterial(data, index) {
				uni.setStorageSync('defaultMaterial', {
					data,
					index
				})
				this.activeMaterial = data.materialMap[10]
				this.activeMaterialIndex = index
				if (this.materialList.length > 0) {
					this.activeMaterialName = this.materialList[index].name
				}
				this.materialListShow = false
				uni.$u.debounce(() => {
					this.onRefresh()
				})
			},
			// 获取模板列表
			getTemplateList(lastId) {
				this.status = "loading";
				getTemplateList({
					pageSize: this.pageSize,
					materialMap: {
						10: this.activeMaterial,
						11: this.phoneModelId || uni.getStorageSync('userInfo').phoneModelId
					},
					type: 1,
					lastId
				}).then(res => {
					this.templateList = !lastId ? res.data : this.templateList.concat(res.data)
					if (this.templateList.length == 0) {
						this.isEmpty = true
						this.status = "nomore";
					} else if (res.data.length < 10) {
						this.status = "nomore";
						this.isEmpty = false
					} else {
						this.status = "loadmore";
						this.isEmpty = false
					}
					this.triggered = false

				}).catch(err => {
					this.status = "nomore";
					this.onRestore()
				})
			},
			// 双击回到顶部
			dbClick() {
				this.scrollTop = this.scrollTop == -1 ? 0 : -1
			},
			toEdit() {
				uni.navigateTo({
					url: '/pages/diy/diyPhoneCase'
				})
			}
		},
		onLoad() {
			uni.$u.debounce(() => {
				this.getMaterialList()
			})
		},
		onShow() {
			if (this._phoneModelId != this.phoneModelId) {
				this.selectModel(this.phoneModelId)
			}
			let defaultMaterial = uni.getStorageSync('defaultMaterial')
			if (defaultMaterial && defaultMaterial.data) {
				this.selectMaterial(defaultMaterial.data, defaultMaterial.index)
				uni.removeStorageSync('defaultMaterial')
				// this.activeMaterial = defaultMaterial.data.materialMap[10]
			}
			// uni.$u.debounce(() => {
			// 	this.onRefresh()
			// })
		},
		onHide() {},
		onShareAppMessage() {
			return {
				title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
				path: `/pages/index/index?page=product`,
			}
		},
		// onShareTimeline() {
		// 	return {
		// 		title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
		// 		path: `/pages/index/index?page=product`,
		// 	}
		// }
	}
</script>

<style lang="scss">
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;

		.menu {
			width: 100%;
			background: #fff;
			/* height: 60px; */
		}
	}

	.list {
		width: 100%;
		flex-grow: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.scroll {
			height: 100%;
			overflow: hidden;
			flex-grow: 1;
		}

		.select {
			height: 73.5rpx;
			width: 100%;
			display: flex;
			margin-top: 17rpx;

			input {
				height: 100%;
				flex-grow: 1;
				background-color: #fff;
				border-radius: 17rpx;
				margin-left: 17rpx;
				border: 1px solid #EBEBEB;
				background-image: url(@/static/images/icon/sousuo.png);
				background-size: 42rpx;
				background-repeat: no-repeat;
				background-position: calc(100% - 21rpx);
				padding: 17rpx 79rpx 17rpx 42rpx;
				box-sizing: border-box;
			}

			.btn-edit {
				height: 73.5rpx;
				width: 73.5rpx;
				margin: 0 17rpx;
				border-radius: 17rpx;
				background-color: #fff;
				text-align: center;
				font-size: 22rpx;
				color: #8a8a8a;
				padding-top: 7rpx;
				border: 1px solid #EBEBEB;
			}
		}

		.material-content {
			display: flex;
			padding: 10rpx;
			background-color: #fff;
			position: relative;

			.phone-model {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				margin: 26rpx 35rpx 0;
				position: relative;
				color: #979797;
				flex-shrink: 0;

				.phone-select {
					display: inline-block;
					border-radius: 50rpx;
					border: 2rpx solid #333;
					padding: 0 17rpx;
					font-size: 26rpx;
					height: 50rpx;

					text {
						font-weight: bold;
						color: #333;
					}

					.text1 {
						margin-left: 17rpx;
						font-size: 20rpx;
					}
				}
			}

			.material-name {
				height: 100rpx;
				display: flex;
				flex-grow: 1;

				image {
					height: 100%;
					width: 100rpx;
					position: absolute;
				}

				text {
					font-size: 28rpx;
					margin: auto;
					margin-left: 100rpx;
				}

				.text1 {
					margin-left: 17rpx;
					font-size: 20rpx;
				}
			}

			.material-list {
				height: 300rpx;
				width: 100%;
				background-color: #fff;
				position: absolute;
				bottom: -300rpx;
				left: 0;
				z-index: 999;
				box-shadow: -1rpx 10rpx 17rpx -7rpx #666;

				.material-scroll {
					display: flex;

					.material-item {
						height: 280rpx;
						width: 25vw;
						background-color: #fff;
						border-radius: 17rpx;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						position: relative;
						margin-right: 30rpx;
						text-align: center;
						flex-shrink: 0;

						&.active {
							opacity: 0.7;

							.radio {
								position: absolute;
								right: 17rpx;
								top: 17rpx;
								z-index: 1;
							}
						}

						.image {
							width: 100%;
							height: 280rpx;
							background: #fff;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
								left: 0;
							}
						}

						.title {
							font-size: 24rpx;
							margin: 17rpx;
							flex-shrink: 0;
							flex-grow: 0;
							height: 50rpx;
						}

						.item-btn {
							height: 65.8rpx;
							border-radius: 17rpx;
							font-size: 30rpx;
							box-sizing: border-box;
							text-align: center;
							line-height: 62.8rpx;
							background-color: #333;
							color: #fff;
							margin: 17rpx;
						}
					}
				}

			}
		}

		.list-box {
			display: flex;
			justify-content: start;
			flex-wrap: wrap;
			padding: 0 15rpx;

			.product-item {
				width: 343rpx;
				height: 393rpx;
				flex-basis: 50%;
				text-align: center;

				.item {
					border-radius: 20rpx;
					overflow: hidden;
					position: relative;

				}

				.picture {
					width: 343rpx;
					height: 343rpx;
				}

				.title {
					width: 100%;
					font-size: 21rpx;
					bottom: 40rpx;
					position: absolute;
					padding: 0 15rpx;
					background-color: #ffffff8c;
					height: 31rpx;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.price {
					font-size: 25rpx;
					font-weight: bold;
					text-align: center;
				}
			}
		}

		.shopping-trolley {
			position: fixed;
			background: #00000060;
			bottom: 10rpx;
			left: 17rpx;
			height: 83rpx;
			width: calc(100% - 34rpx);
			border-radius: 41rpx;
			overflow: hidden;
			box-shadow: 0px 0px 0px 1px transparent;
			transition: 0.5s;

			.badge {
				position: absolute;
				top: 3rpx;
				left: 94rpx;

				&.more10 {
					left: 82rpx;
				}

				&.more99 {
					left: 82rpx;
				}
			}

			.car {
				height: 67rpx;
				width: 67rpx;
				margin: 8rpx 34rpx;
				float: left;
			}

			.price {
				font-size: 40rpx;
				color: #fff;
				float: left;
				line-height: 83rpx;
				font-weight: 700;
			}

			.get-phone {
				position: absolute;
				width: 187rpx;
				right: 0;
				opacity: 0;
			}

			.to-order {
				background: #fff;
				color: #3D3D3D;
				float: right;
				width: 187rpx;
				height: 100%;
				font-size: 35rpx;
				font-weight: 700;
				line-height: 83rpx;
				text-align: center;
			}

			&.tShow {
				box-shadow: 0px 0px 0px 1px #33333380;
			}

			&.hide {
				bottom: -85rpx;
			}
		}
	}
</style>